/* 路由文件 */

// 1. 引入模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 引入路由组件
import Home from '../layout/Home.vue'
import Index from '../views/index/Index.vue'

/* 注意：低版本vue-router在面包屑导航中重复触发当前路由时，就会报错NavigationDuplicated: Avoided redundant navigation to current location，
这是element-ui自身的问题，配置以下代码就可以解决（升级vue-router版本也可以解决） */
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  return originalPush.call(this, location).catch((err) => err)
}

// 3. 把vue-router挂载到vue实例对象中
Vue.use(VueRouter)

// 4. 创建路由规则
const routes = [
  /* 懒加载：页面初次渲染的时候不加载，只有访问到了该组件才会加载页面，
  加快网页初次加载速度，按需加载
  component: () =>import('../components/xxx.vue') */

  /* name、meta属性为自定义属性，可以通过this.$route.matched获取，一般用来做面包屑导航使用 */
  {
    path: '/', // 根目录
    redirect: '/home'
  },
  {
    path: '/home', // 首页
    component: Home,
    redirect: '/index',
    children: [
      // 1级：后台首页
      {
        path: '/index',
        component: Index
      },
      // 1级：订单管理
      {
        name: '订单管理',
        path: '/orders',
        component: () => import('../views/orders/Orders.vue')
      },
      // 1级：商品管理
      {
        name: '商品管理',
        path: '/goods',
        component: () => import('../views/goods/Goods.vue'),
        redirect: '/goods/list',
        children: [
          // 2级：商品列表
          {
            name: '商品列表',
            path: '/goods/list',
            component: () => import('../views/goods/List.vue')
          },
          // 2级：商品添加
          {
            name: '商品添加',
            path: '/goods/add',
            component: () => import('../views/goods/Add.vue')
          },
          // 2级：商品分类
          {
            name: '商品分类',
            path: '/goods/category',
            component: () => import('../views/goods/Category.vue')
          }
        ]
      },
      // 1级：店铺管理
      {
        name: '店铺管理',
        path: '/shop',
        component: () => import('../views/shop/Shop.vue')
      },
      // 1级：账号管理
      {
        name: '账号管理',
        path: '/account',
        component: () => import('../views/account/Account.vue'),
        redirect: '/account/list',
        children: [
          // 2级：账号列表
          {
            name: '账号列表',
            path: '/account/list',
            component: () => import('../views/account/List.vue')
          },
          // 2级：添加账号
          {
            name: '添加账号',
            path: '/account/add',
            component: () => import('../views/account/Add.vue')
          },
          // 2级：修改密码
          {
            name: '修改密码',
            path: '/account/modify',
            component: () => import('../views/account/Modify.vue')
          },
          // 2级：个人中心
          {
            name: '个人中心',
            path: '/account/personal',
            component: () => import('../views/account/Personal.vue')
          }
        ]
      },
      // 1级：销售统计
      {
        name: '销售统计',
        path: '/statistics',
        component: () => import('../views/statistics/Statistics.vue'),
        redirect: '/statistics/goods',
        children: [
          // 2级：商品统计
          {
            name: '商品统计',
            path: '/statistics/goods',
            component: () => import('../views/statistics/Goods.vue')
          },
          // 2级：订单统计
          {
            name: '订单统计',
            path: '/statistics/orders',
            component: () => import('../views/statistics/Orders.vue')
          }
        ]
      }
    ]
  },
  {
    path: '/login', // 登录页
    component: () => import('../views/Login.vue')
  }
]

// 5. 创建vue-router实例对象
const router = new VueRouter({
  routes
})

// 6. 设置导航守卫功能：不允许未登录的用户进入路由页面
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')

  // 当没有token且不在登录页时，跳转到登录页面
  if (!token && to.path !== '/login') next('/login')
  else next()
})

// 7. 导出实例对象（在main.js中接收）
export default router
